<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { KeyValues, TableCellBtn } from '../../../utils/types';
import { paramSourceSelect, UiCellBtns } from '../../../utils';

const props = defineProps<{ modelValue: KeyValues[] }>()

const cls = 'ui-api-editor-service-config-plugin-param-config'

const addItem = () => {
  props.modelValue.push({})
}

const removeItem = (row: any) => {
  const arr = props.modelValue
  arr.splice(arr.indexOf(row), 1)
}

const getBtns = (row: any) => {
  return { label: '删除', onClick: removeItem.bind(null, row) } as TableCellBtn
}
</script>

<template>
  <div :class="cls">
    <ElTable :data="props.modelValue">
      <ElTableColumn label="参数来源" min-width="140">
        <template v-slot="{ row }">
          <ElSelect v-model="row.inputParamOrigin">
            <ElOption v-for="_ in paramSourceSelect.allData" :key="_.value" v-bind="_" />
          </ElSelect>
        </template>
      </ElTableColumn>
      <ElTableColumn label="参数名" min-width="120">
        <template v-slot="{ row }">
          <ElSelect v-model="row.paramsName" filterable allow-create default-first-option ></ElSelect>
        </template>
      </ElTableColumn>
      <ElTableColumn label="类型" min-width="120">
        <template v-slot="{ row }">
          <ElSelect v-model="row.type"></ElSelect>
        </template>
      </ElTableColumn>
      <ElTableColumn label="校验规则" min-width="120">
        <template v-slot="{ row }">
          <ElInput placeholder="请输入" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="操作" width="80" fixed="right">
        <template v-slot="{ row }">
          <UiCellBtns :btns="getBtns(row)" />
        </template>
      </ElTableColumn>
    </ElTable>
    <div :class="`${cls}_actions`">
      <ElButton :icon="Plus" type="primary" plain @click="addItem">添加一行</ElButton>
    </div>
  </div>
</template>

<style lang="scss">
.ui-api-editor-service-config-plugin-param-config {
  width: 100%;
  &_actions {
    width: 100%;
    margin-top: $page-padding;
    text-align: center;
  }
}
</style>
